<template>
  <div class="bj">
    <div class="zc" v-if="data">
      <div class="xh" v-for="i in data.results" :key="i.id">
        <div class="dt">
          <img :src="i.dt" alt="" class="dt-t" />
          <div class="ss">
            <img src="../assets/images/xmt/ss.jpg" alt="" />
          </div>
          <router-link>查看商家详细信息</router-link>
        </div>
        <div class="xq">
          <h3>门店名称：{{ i.name }}</h3>
          <p class="xq-wz">
            {{ i.xq }}
          </p>
          <img :src="i.xt" v-for="y in 5" :key="y" />
          <div class="dw">
            <img src="../assets/images/xmt/dw.jpg" alt="" class="dw-t" />
            <p class="dz">商家地址：{{ i.dz }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="yc">
      <div class="yc-sc">
        <el-upload
          class="upload-demo"
          ref="upload"
          action=""
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
          <el-button
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload"
            >上传到服务器</el-button
          >
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>
      <div class="yc-t">
        <img src="../assets/images/xmt/jm.jpg" alt="" />
        <img src="../assets/images/xmt/ycdh.jpg" alt="" />
        <img src="../assets/images/xmt/yc1.jpg" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  mounted() {
    this.axios.get("http://localhost:3000/md").then((res) => {
      // console.log(res);
      this.data = res.data;
    });
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>

<style>
.xq > .xq-wz {
  color: rgb(148, 146, 146) !important;
}
.yc .yc-sc {
  margin-top: 30px;
}
.yc-wz p {
  font-size: 25px;
}
.yc-wz .w1 {
  padding-left: 30px;
  line-height: 50px;
  background-color: rgb(219, 65, 160);
  box-shadow: 5px 5px 5px rgb(219, 65, 160);
}
.yc-wz .w2 {
  box-shadow: 5px 5px 5px rgb(219, 65, 160);
  padding-left: 20px;
  margin-top: 20px;
  width: 200px;
  background-color: rgb(219, 65, 160);
}
.dw {
  display: inline-block;
  position: relative;
}
.dw p {
  width: 220px;
  display: inline-block;
  margin-left: 40px;
}
.dw .dw-t {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
}
.ss {
  display: inline-block;
  position: relative;
}
.ss img {
  width: 30px;
  position: absolute;
  top: 30px;
  left: -180px;
}
.bj {
  background-image: linear-gradient(
    rgb(219, 243, 243),
    rgb(252, 223, 228),
    #fff
  );
  margin-top: 110px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: pink;
  color: #fff;
}
.bj {
  display: flex;
}
.yc {
  width: 300px;
  height: 1100px;
  background-color: #fff;
  margin-left: 50px;
  position: relative;
}
.yc .yc-t {
  position: absolute;
  bottom: 100px;
}
.yc img {
  width: 100%;
  display: block;
}
.zc {
  width: 600px;
  height: 1100px;
  margin-left: 480px;
  background-color: #fff;
}
.dt {
  width: 200px;
  height: 150x;
  margin-right: 20px;
  margin-left: 5px;
  box-sizing: border-box;
}
.dt .dt-t {
  margin-top: 10px;
  width: 180px;
  height: 120px;
}
.dt a {
  margin-top: 30px;
  margin-left: 32px;
  display: inline-block;
  color: rgb(60, 193, 233);
  text-decoration: none;
}
.xq h3 {
  border-bottom: 1px dotted gray;
  margin-bottom: 10px;
  padding: 5px;
}
.xh {
  margin-top: 5px;
  width: 580px;
  height: 200px;
  display: flex;
  border-bottom: 1px dotted gray;
}
.xq img {
  margin-top: 5px;
  width: 17%;
  height: 50px;
  margin-right: 10px;
}
.xq .dz {
  margin-top: 20px;
  color: orange;
}
* {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.block {
  text-align: center;
  margin-top: 30px;
}
</style>